﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
   <style>

   </style>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px">
        <el-row>
            <el-col :span="6">
                <div style="padding-top: 10px">
                    <el-input v-model="keyword" placeholder="请输入查询关键字"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="padding-top: 10px">
                    <el-button icon="el-icon-search" @click="toSearch()">搜索</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-empty :image-size="500" v-if="items.length==0"
              image="http://www.yijianshuzi.com/assets/staticimg/empty.d7ddfe2.jpg"></el-empty>
    <div class="infinite-list-wrapper" v-infinite-scroll="loadMthod"
         style="margin-bottom: 10px;margin-top:20px;height:640px;overflow-y:auto" v-if="items.length>0">
        <div class="list">
            <el-row>
                <el-col :span="6" v-for="item in items">
                    <el-card>
                        <a href="/toLogin"><img :src="item.productSrcs[0]" style="width: 400px;height: 300px"
                                                class="image"></a>
                        <div v-text="item.pname"></div>
                        围观人数：<span v-text="item.lookeramount"></span>
                        叫价次数：<span v-text="item.callamount"></span>
                        雪花id：<span v-text="item.id"></span>
                        <div v-if="item.state=='1'" style="color:red;">
                            <el-row>
                            <el-col :span="6">
                                <span>距离开始</span>
                            </el-col>
                            <el-col :span="12">
                                <el-statistic :value="Date.parse(item.starttime)" time-indices
                                              format="HH时:mm分:ss秒" @finish="startRound(item.id)"
                                ></el-statistic>
                            </el-col>
                        </el-row>
                        </div>
                        <div v-if="item.state=='2'">
                            <span style="color:yellowgreen;">正在拍卖中</span>
                        </div>
                        <div v-if="item.state=='3'">
                            <span style="color:yellow">已结束</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div align="center">
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了</p>
            </div>
        </div>

    </div>
</div>
<script>
    var roundList = new Vue({
        el: "#app",
        data: {
            items: [],
            pageSize: 8,
            pageNumber: 1,
            totalPage: 0,
            totalRecords: 0,
            loading: false,
            noMore: false,
            roundState: 0,
            activeIndex: '1',
            keyword: "",
        },
        methods: {
            toSearch: function () {
                this.searchRoundES();
            },
            startRound: function (id) {
                //alert(id)
                //时间到了执行代码：
            },
            searchRoundES: function () {
                $.post("/round/roundES", {
                    pageSize: this.pageSize,
                    pageNumber: this.pageNumber,
                    keyword: this.keyword
                }, function (data) {
                    roundList.items = data.list;
                    roundList.totalPage = data.pages;
                    roundList.totalRecords = data.total;
                    if (roundList.items == 0) {
                        roundList.isNull = true;
                    }
                })
            },
            loadMthod() {
                roundList.loading = true;
                setTimeout(function () {
                    if (roundList.pageSize >= roundList.totalRecords) {
                        roundList.noMore = true;
                        roundList.loading = false;
                        return
                    }
                    roundList.pageSize += 4;
                    roundList.searchRoundES();
                    roundList.loading = false;
                }, 2000)
            },
        },
        created() {
            this.keyword = window.parent.app.keyword;
            this.searchRoundES();
            //this.roundState=window.parent.app.roundState;
        }
    });
</script>
</body>
</html>
